<template>
  <div v-if="(realVal || realVal === 0) && (price || price===0)">
    <el-tooltip :open-delay="800" :placement="placement" class="item price-tooltip" effect="dark">
      <div slot="content" style="max-width: 200px;">
        {{ price | moneyFilter(true, '', true) }}{{ unit?unit:'' }}
        <el-button
          v-if="showCopyBtn"
          type="text"
          size="small"
          style="padding: 0"
          @click="tooltipContentCopy"
        >复制</el-button>
      </div>
      <div :class="{'highlight': isHighlight}" class="ellipsisOne">{{ price | moneyFilter(true, '', true) }}{{ unit?unit:'' }}</div>
    </el-tooltip>
  </div>
  <div v-else>--</div>
</template>

<script>
import { moneyFilter } from '@/filters/number';
import { isEmpty } from '@/utils/tools';
export default {
  filters: { moneyFilter },
  props: {
    price: {
      type: Number | String,
      default: null
    },
    realVal: {
      type: Number | String,
      default: null
    },
    placement: {
      type: String,
      default: 'top'
    },
    unit: {
      type: String,
      default: ''
    },
    isHighlight: {
      type: Boolean,
      default: false
    },
    showCopyBtn: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    tooltipContentCopy() {
      if (isEmpty(this.price)) return;
      const copyVal = moneyFilter(this.price, true, '', true) + (this.unit || '');
      this.$copyText(copyVal).then(() => {
        this.$message.success('复制成功');
      }, e => {
        console.error(e);
      });
    }
  }
};
</script>

<style scoped lang="scss">
.price-tooltip {
  display: inline-block;
  max-width: 100%;
  line-height: 1;
  vertical-align: middle;
}
.highlight {
  color: #FF4E5F;
}
</style>
